<template>
  <div>
    <VTabs
      v-model="currentTab"
      class="v-tabs-pill"
    >
      <VTab>运行报表</VTab>
      <VTab>任务管理</VTab>
      <VTab>调度日志</VTab>
      <VTab>执行器管理</VTab>
    </VTabs>

    <VCard class="mt-5 v-card-box-shadow-background">
      <VCardText>
        <VWindow v-model="currentTab">
          <VWindowItem :key="0">
            <TaskReport />
          </VWindowItem> 
          <VWindowItem :key="1">
            <TaskList />
          </VWindowItem> 
          <VWindowItem :key="2">
            <TaskLogList />
          </VWindowItem> 
          <VWindowItem :key="3">
            <TaskExecutorList />
          </VWindowItem> 
        </VWindow>
      </VCardText>
    </VCard>
  </div>
</template>

<script setup>
import TaskExecutorList from '@/views/liteflow/task/taskExecutorList.vue'
import TaskList from '@/views/liteflow/task/taskList.vue'
import TaskLogList from '@/views/liteflow/task/taskLogList.vue'
import TaskReport from '@/views/liteflow/task/taskReport.vue'

const currentTab = ref(0)
</script>

<style scoped>
.v-card-box-shadow-background {
  background: transparent;
  box-shadow: none;
}

.v-card-box-shadow-background .v-card-text {
  padding-block: 0;
  padding-inline: 0;
}

.v-card-box-shadow-background .v-card-text .v-window {
  padding: 24px;
}
</style>
